@extends('WShop::layout')
@push('styles')
    <link href="{{asset(config('view.frontend.wap_login').'/css/mui.picker.css')}}" rel="stylesheet" />
    <link href="{{asset(config('view.frontend.wap_login').'/css/mui.poppicker.css')}}" rel="stylesheet" />
    <style>
        .mui-user-xx .mui-input-row input {
            width: 75%;
        }
        .mui-user-xx .mui-input-row span {
            float: left;
            width: 25%;
            color: #333;
            padding: 8px 15px;
            background: #fff;
            margin-top: 1px;
        }
    </style>
@endpush

@section('content')
    @component('WShop::public.header')
        @slot('page_title'){{$page_title}} @endslot
    @endcomponent
    <div class="mui-content mui-scroll-wrapper" id="pullrefresh" style="background: transparent;">
        <div class="mui-scroll">
            <div class="mui-table-view mui-table-view-chevron mui-bottom" style="background: transparent;">
                <div class="mui-user-xx">
                    <form action="{{url()->current()}}" id="register-form" class="form2 active" method="post">
                        {{csrf_field()}}

                        <div class="mui-input-row">
                            <span>手机号</span>
                            <input type="text" name="phone" id="phone" placeholder="填写手机号"/>
                        </div>
                        <div class="mui-input-row" style="display:block;">
                            <span>验证码</span>
                            <input type="text" name="phone_code" placeholder="手机验证码"/>
                            <button type="button" id="send_code"
                                    style="top: 7px;width: 60px;height: 25px;line-height: 15px;right: 10px;background: #f0f6fd;color: #225181;font-size: 12px;border-radius: 16px;">
                                验证码
                            </button>
                        </div>
                        <div class="mui-input-row">
                            <span>登录密码</span>
                            <input type="password" name="login_pwd" placeholder="6-20位登录密码"/>
                        </div>
                        <div class="mui-input-row">
                            <span>重复密码</span>
                            <input type="password" name="re_login_pwd" placeholder="再次确认密码"/>
                        </div>
                        <div class="mui-input-row">
                            <span>支付密码</span>
                            <input type="password" name="pay_pwd" placeholder="六位数支付密码"/>
                        </div>
                        <div class="mui-input-row">
                            <span>重复密码</span>
                            <input type="password" name="re_pay_pwd" placeholder="确认支付密码"/>
                        </div>

{{--                        <div class="mui-input-row ">--}}
{{--                            <span>注册等级</span>--}}
{{--                            <input type="text" id='showSysLevel' readonly placeholder="请选择注册等级" value=""--}}
{{--                                   data-sys_level={{json_encode(config('shop.level'))}} data-bill_money="{{json_encode(format_rule(json_decode(get_rule('bill_money'))))}}">--}}
{{--                            <input type="hidden" name="level" id='level' value="">--}}
{{--                        </div>--}}

                        <div class="mui-input-row">
                            <span>邀请人</span>
                            <input type="text" name="share_code" placeholder="请输入邀请人手机号" value=""/>
                        </div>

                        <button class="mui-btns btns2" type="button"
                                style="margin-top: 30px;background: #5a92fd;color: #fff;height: 40px;width: 95%;">注册
                        </button>

                    </form>
                </div>
            </div>
        </div>
    </div>

@endsection
@push('scripts')
    <script>
        var code = '';
        var input = $('input');
        var phone =''
        //true就是可以发送
        var onoff = true;
        //发送验证码
        $('#send_code')[0].addEventListener('tap',function(){

            //false就不能发送
            if(!onoff){
                return;
            }
            onoff = false;
            //点击玩按钮干什么?
            //发验证码?
            // 1-给谁发? 手机号码
            phone = $('input[name="phone"]').val();
            if(phone == ''){
                mui.toast('手机号码不能为空');
                onoff = true;
                return;
            }

            if(phone.length != 11){
                mui.toast('手机号码位数不正确');
                onoff = true;
                return;
            }
            
            // 2-验证码是什么? cast 可以生成一个随机码
            code =getCode(phone);

            // 3-发送 在这里我来使用一个定时器来模拟一下发送的时间, 大家可以使用第三方的短信平台，比如阿里大于，我们在学员专区内的功能模块开发里有2节视频，大家可以看
            var num = 60;
            var timer = setInterval(function(){
                num--;
                if(num == 0){
                    send_code.innerHTML = '发送验证码';
                    //定时器停了
                    clearInterval(timer);
                    onoff = true;
                }else{
                    send_code.innerHTML = num + 'S';
                }
            },1000); // 1000 毫秒==1秒


        });

        function getCode(phone)
        {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                type: 'post',
                url: "{{route('f_Login_sendPhoneCode')}}",
                dataType: 'json',
                data: {phone:phone}
            }).done(function (response) {
                if(response.status){
                    mui.toast(response.msg);
                }else{
                    mui.toast(response.msg);
                }
            }).fail(function (XMLHttpRequest) {
                if (XMLHttpRequest.status == 422) {
                    var errors = XMLHttpRequest.responseJSON.errors;
                    if(typeof errors == 'object') {
                        for (var index in errors) { // 不推荐这样
                            mui.toast(errors[index][0]);
                            break;
                        }
                    }else{
                        mui.toast(XMLHttpRequest.responseJSON.msg);

                    }
                }else{
                    mui.toast('网络异常,请检查连接');
                }

            }).always(function () {

            });
        }

        $('.btns2')[0].addEventListener('click',function(){
            var load =  layer.open({type: 2});
            $.ajax({
                type: 'post',
                url: $('#register-form').attr('action'),
                dataType: 'json',
                data: $('#register-form').serialize()
            }).done(function (response) {
                if(response.status){
                    tooltips(response.msg,6);
                    setTimeout(function () {
                        location.href = response.url;
                    }, 2000);
                }else{
                    tooltips(response.msg,5);
                }
            }).fail(function (XMLHttpRequest) {
                if (XMLHttpRequest.status == 422) {
                    var errors = XMLHttpRequest.responseJSON.errors;
                    if(typeof errors == 'object') {
                        for (var index in errors) { // 不推荐这样
                            tooltips(errors[index][0]);
                            break;
                        }
                    }else{
                        tooltips(XMLHttpRequest.responseJSON.msg);

                    }
                }else{
                    tooltips('网络异常,请检查连接');
                }

            }).always(function () {
                layer.close(load);
            });

            function tooltips(msg) {
                layer.open({
                    content: msg
                    ,skin: 'msg'
                    ,time: 2 //2秒后自动关闭
                });
            }
        })
    </script>

    <script src="{{asset(config('view.frontend.wap_login').'/js/mui.picker.js')}}"></script>
    <script src="{{asset(config('view.frontend.wap_login').'/js/mui.poppicker.js')}}"></script>

    <script type="text/javascript">

        var levelPicker = new mui.PopPicker()
        var showLevelPickerButton = document.getElementById('showSysLevel');

        var sys_levelData = showLevelPickerButton.dataset.sys_level;
        sys_levelData = JSON.parse(sys_levelData)
        var sys_bill_money = showLevelPickerButton.dataset.bill_money;
        sys_bill_money = JSON.parse(sys_bill_money)
        console.log(sys_bill_money)
        var levelData = []
        var data = '';
        mui.each(sys_levelData,function(index,item){
            data = {
                'value':index,
                'text': item +'---'+ sys_bill_money[index][1]
            }
            levelData.push(data)
         })
        levelPicker.setData(levelData);
        showLevelPickerButton.addEventListener('tap', function(event) {
            levelPicker.show(function (items) {
                $(showLevelPickerButton).val( items[0].text )
                $("#level").val(items[0].value);
                //返回 false 可以阻止选择框的关闭
                //return false;
            });
        })
    </script>
@endpush